<template>
	<div class="handle-box">
        <el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="deleteChecked">批量删除</el-button>
        <el-select v-model="select" placeholder="筛选" class="handle-select mr10" v-if="selectList.length">
            <el-option v-for="(item,index) in selectList" :key="index" :label="item.name" :value="item.value"></el-option>
        </el-select>
        <el-select v-model="type" slot="prepend" placeholder="请选择" v-if="typeList.length" clearable>
	      <el-option v-for="(item,index) in typeList" :label="item.name" :value="item.value" :key="index"></el-option>
	    </el-select>
        <el-input v-model="query" placeholder="筛选关键词" class="handle-input mr10" clearable></el-input>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
		<el-button type="success" icon="el-icon-edit" class="handle-create" v-if="create" @click="created">新增</el-button>
    </div>
</template>
<script>
	export default {
        props: {
		  selectList: {
		    type: Array,
		    default: () => {
		    	return [];
		    }
		  },
		  typeList: {
		  	type: Array,
		  	default: () => {
		  		return [];
		  	}
		  },
		  create: {
		  	type: Boolean,
		  	default: false
		  }
		},
		data() {
			return {
				select: '',
				query: '',
				type: ''
			}
		},
		methods: {
			deleteChecked() {
				this.$emit('handleAction', 'delete');
			},
			created() {
				this.$emit('handleAction', 'create');
			},
			search() {
				if(!((this.query && this.type) || (!this.query && !this.type)) && this.select === '') {
					this.$message.info('请输入查询条件');
					return false;
				}
				this.$emit('search',this.query, this.type);
			}
		},
		watch: {
			select(curVal, oldVal) {
				if(curVal === oldVal) {
					return;
				}
				this.$emit('selectChange', curVal);
			}
		}
    }
</script>

<style scope>
.handle-box{
    margin: 20px 0;
}
.handle-select{
    width: 120px;
}
.handle-input{
    width: 300px;
    display: inline-block;
}
.el-select .el-input {
	width: 130px;
}
.handle-create {
	float: right;
}
</style>